<template>
    <div class="class-content" v-loading.body="loading">
        <tabs :labels="labels" :defaultActive="labels[1]">
            <!--My Course-->
            <article slot="My Course">
                <div class="main-view">
                    <ul class="learner-Level-list">
                        <li class="level-info" v-for="(info,index) in myCourseList">
                            <nuxt-link :to="{name:'learner-courseList',query:{levelId:info.id}}"
                                       v-if="info.lock==0" class="level-info-start">
                                <div class="tb">
                                    <div class="img-box">
                                        <img class="level-info-bear" :src="IMGSET[levelInfo[index].icon]" alt=""/>
                                    </div>
                                    <h1 class="level-title">{{levelInfo[index].title}}</h1>
                                </div>
                            </nuxt-link>
                            <nuxt-link :to="'/store'" v-if="info.lock==1" class="level-info-start">
                                <div class="tb">
                                    <div class="img-box">
                                        <img class="level-info-bear" :src="IMGSET[levelInfo[index].icon]" alt=""/>
                                    </div>
                                    <h1 class="level-title">{{levelInfo[index].title}}</h1>
                                </div>
                            </nuxt-link>
                            <nuxt-link :to="'/store'" target="_blank" v-if="info.lock==1" class="level-info-shade-lock" title="Please click here to purchase all other levels.">
                            </nuxt-link>
                        </li>
                    </ul>
                    <p class="content-note">Note: You can use free trail courses or buy the courses which you need, or you can
                        <nuxt-link :to="'/myBCC/resources'" target="_blank">click here</nuxt-link>
                        to activate your courses.
                    </p>
                </div>
            </article>
            <!-- Homework -->
            <article slot="Homework">
                <div class="table-container">
                    <nav class="resources-nav">
                        <section class="nav-left-side">
                            <div class="btn-type">
                                <em class="nav-legend-short ">Level</em>
                                <el-select v-model="selectLevel" @change="changeHomeworkCondition" placeholder="All Level">
                                    <el-option
                                            v-for="item in levelOptions"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                                <em class="nav-legend-short ">Lesson</em>
                                <el-select v-model="selectLesson" @change="changeHomeworkCondition" placeholder="All Lesson">
                                    <el-option
                                            v-for="item in lessonOptions[selectLevel]?lessonOptions[selectLevel]:[]"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                                <em class="nav-legend-short ">Status</em>
                                <el-select v-model="selectStatus" @change="changeHomeworkCondition" placeholder="All Lesson">
                                    <el-option
                                            v-for="item in checkOptions"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                        </section>
                    </nav>
                    <article class="content-table">
                        <template v-if="homeworkList.length > 0">
                            <el-table
                                    :stripe="true"
                                    :data="formatHomeworkData"
                                    border
                                    style="width: 100%"
                                    :default-sort="{prop: 'date', order: 'descending'}"
                                    :fit="true"
                                    ref="table">
                                <el-table-column
                                  type="selection"
                                  width="55"
                                  align="center">
                                </el-table-column>
                                <el-table-column
                                        prop="level"
                                        label="Level"
                                        align="center"
                                        width="120"
                                >
                                </el-table-column>
                                 <el-table-column
                                        prop="lesson"
                                        label="Lesson"
                                        align="center"
                                        width="120"
                                >
                                </el-table-column>
                                <el-table-column
                                        prop="exerciseType"
                                        label="Exercise Type"
                                        align="center"
                                        width="140"
                                >
                                </el-table-column>
                                <el-table-column
                                        prop="checkStatus"
                                        label="Status"
                                        align="center"
                                        width="120"
                                >
                                </el-table-column>
                                <el-table-column
                                        prop="createTime"
                                        label="Create Time"
                                        align="center"
                                        width="180"
                                >
                                </el-table-column>
                                <el-table-column
                                        label="Action"
                                        align="center"
                                >
                                    <template scope="scope">
                                        <nuxt-link :to="{name:'learner-homeworkDetail',query:{homeworkId:formatHomeworkData[scope.$index].id}}">
                                            <el-button
                                                    class="table-action" type="text" size="small">
                                                View
                                            </el-button>
                                        </nuxt-link>
                                    </template>
                                </el-table-column>
                                
                            </el-table>
                        </template>
                    </article>
                    <footer class="footer">
                        <template v-if="homeworkList.length > 0">
                            <el-pagination
                                    class="table-info-pagination"
                                    layout="prev, pager, next"
                                    :page-size="pageSize"
                                    :current-page.sync="pageNum"
                                    :total="homeworkList?homeworkList.length:0">
                            </el-pagination>
                        </template>
                    </footer>
                </div> 
            </article>
        </tabs>
    </div>    
</template>
<script>
    import tabs from "~/components/tabs";
    import axios from "axios";
    import utils from '~/plugins/utils';
    import {mapState, mapActions} from 'vuex';
    export default {
        async fetch({store, redirect}){
            try {
                await Promise.all([
                    store.dispatch("index/base/getMyStudyLevel"),
                    store.dispatch("index/base/getMyCourseList"),
                    store.dispatch("index/base/getHomeworkList"),
                    store.dispatch("index/base/getCheckStatus")
                ]);
            } catch (e) {
                redirect("/");
            }
            store.dispatch("index/learner/learner/changeEntryActive", "myCourse");
        },
        data () {
            return {
                COURSE_ENTRY: {name: 'course-index-matching-4'},
                CURRENT_PATH: [{
                    name: "My Course",
                    url: "learner-myCourse"
                }],
                levelInfo: [{
                    icon: 1,
                    title: "Level 1"
                }, {
                    icon: 2,
                    title: "Level 2"
                }, {
                    icon: 3,
                    title: "Level 3"
                }, {
                    icon: 4,
                    title: "Level 4"
                }, {
                    icon: 5,
                    title: "Level 5"
                }, {
                    icon: 6,
                    title: "Level 6"
                }],
                loading: false,
                dialogVisible: false,
                //labels: ["Homework","My Course"],
                labels: ["Homework","My Course"],
                selectLevel: "0",
                selectLesson: "0",
                selectStatus: "0",
                pageNum: 1,
                pageSize: 10,
                IMGSET: [
                    "",
                    require("~/assets/img/bear_face_icon/level1.png"),
                    require("~/assets/img/bear_face_icon/level2.png"),
                    require("~/assets/img/bear_face_icon/level3.png"),
                    require("~/assets/img/bear_face_icon/level4.png"),
                    require("~/assets/img/bear_face_icon/level5.png"),
                    require("~/assets/img/bear_face_icon/level6.png")
                ]
            }
        },
        methods: {
            ...mapActions('index/base', [
                'getHomeworkList'
            ]),
            changeHomeworkCondition(){
                this.getHomeworkList({
                    levelId: this.selectLevel,
                    lessonId: this.selectLesson,
                    checkStatus: this.selectStatus
                });
            },
            getLevelId(levelName){
                return levelName.match(/(\d)$/) ? levelName.match(/(\d)$/)[0] : 0;
            },
            ...mapActions('index/learner/learner', [
                'changeCurrentPath'
            ])
        },
        computed: {
            ...mapState("index/base", {
                myCourseList: state => state.myCourseList,
                homeworkList: state => state.homeworkList,
                levelOptions: state => state.levelOptions,
                lessonOptions: state => state.lessonOptions,
                checkOptions: state => state.checkOptions
            }),
            formatHomeworkData(){
                const count = this.pageSize;
                let begin = (this.pageNum - 1) * count
                return this.homeworkList.slice(begin, count * this.pageNum);
            }
        },
        created(){
            this.changeCurrentPath(this.CURRENT_PATH)
            console.log(this.formatHomeworkData);
        },
        components: {
            tabs
        }
    }
</script>
<style lang="less" scoped>
    @import "~~assets/less/element/nav_select";
    @import "~~assets/less/element/content_table";
    @import "~~assets/less/element/tab_pagination";
    @import "~~assets/less/element/dialog";
    @import "~~assets/less/educator/myClass";
    @import "~~assets/less/element/common";
    @import "~~assets/less/learner/myCourse";
</style>
